<template>
	<view class="content">
		<view class="title">

			<view class="text">{{gameData.title}}</view>
			<view class="line"></view>
			<view class="text">已参与{{peopleNum}}人</view>
		</view>

		<view class="team_item" v-for="(item ,index) in teamList">
			<view class="team_text">
				<view class="image">
					<image :src="item.pic" mode="aspectFill" @click="setModificationShow(item)"></image>
				</view>

				<view class="text">
					<view class="joinBtn" @click="joinTeam(item)"
						:style="{opacity:userPeople.teamId!=item.id&&team_type!=2?1:0}">
						<text>加入队伍</text>
					</view>
					<view class="" style="display: flex;">
						<text style="margin-right: 20upx;" @click="setModificationShow(item)">{{item.title}}</text>
						<!-- <u-icon name="edit-pen-fill" color="#999999" size="20"   v-if="userPeople.cap_zt==2&&userPeople.teamId==item.id"></u-icon> -->
					</view>
				</view>
			</view>

			<view class="team_member">
				<view class="image" v-for="(items ,indexs) in item.people" @click="setCandidateCaptain(items,item)">

					<view class="setCaptain" v-if="items.user_id==candidate.user_id">
						<view class="text" @click="setCaptain" v-if="items.cap_zt!=2">
							设为队长
						</view>
						<view class="text" @click="setMaster"
							v-if="(userPeople.user_id == gameDataUserId)&&(items.user_id!==userPeople.user_id)">
							设为房主
						</view>

						<view class="indicate">

						</view>
					</view>
					<!-- gameData.team_type==1?'6rpx solid #F4D6AA': -->
					<!-- items.user_id==gameData.user_id?'6rpx solid #F4D6AA': -->
					<image :src="items.user_pic" mode="" :style="{border:items.sex==2?'6rpx solid #E3C9D8':''}">
					</image>
					<view class="type" v-if="items.cap_zt==2">
						队长
					</view>
					
					<view class="master_type" v-if="items.user_id==gameDataUserId">
						房主
					</view>
					<view class="" style="margin-top: 10rpx;">
						{{items.user_name}}
					</view>
				</view>

			</view>

		</view>
		<u-popup :show="sexShow" mode="center" round="12rpx" :safeAreaInsetBottom="false">
			<view class="sex">
				<view class="text">
					请选择您的性别
				</view>
				<view class="sex_list">
					<view :class="sex==1?'active':''" style="margin-right: 64upx;" @click="sex=1">
						<u-icon name="man" color="#91BCE6" size="120rpx" :customStyle="{fontWeight:700}"></u-icon>
					</view>
					<view :class="sex==2?'active':''" style="margin-left: 64upx;" @click="sex=2">
						<u-icon name="woman" color="#FFA5D9" size="120rpx" :customStyle="{fontWeight:700}">></u-icon>
					</view>
				</view>
				<view class="join_game" @tap="$u.throttle(joinGame, 500)">
					加入挑战
				</view>
			</view>
		</u-popup>
		<u-popup :show="anewShow" mode="center" :safeAreaInsetBottom="false" closeable round="12rpx">
			<view style="padding: 0 50upx;width: calc(100vw - 200upx);">
				<view class=""
					style="font-size: 36upx;color: #333333;text-align: center;font-weight: 700;margin: 110upx auto;">
					是否确定重新组队
				</view>
				<view class="" style="display: flex;justify-content: space-between;margin-bottom: 30upx;">
					<view class="anew_btn" @click="dissolve">
						YES
					</view>
					<view class="anew_btn" @click="anewShow=false">
						NO
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 		<u-popup :show="experienceShow" @close="experienceShow=false" mode="center" :safeAreaInsetBottom="false"
			closeable round="12rpx">
			<view style="padding: 0 50upx;width: calc(100vw - 200upx);">
				<view class=""
					style="font-size: 32upx;color: #333333;text-align: center;font-weight: 700;margin-top: 90upx;">
					当前有队伍人数不足1人<br />
					会影响您的挑战体验，请规划队伍人数
				</view>
				<view class=""
					style="font-size: 36upx;color: #333333;text-align: center;font-weight: 700;margin: 30upx auto;">
					是否确定开始挑战？
				</view>
				<view class="" style="display: flex;justify-content: space-between;margin-bottom: 30upx;">
					<view class="anew_btn" @click="experienceShow=false">
						我知道了
					</view>
			<view class="anew_btn" @click="experienceShow=false">
						NO
					</view>
				</view>
			</view>
		</u-popup> -->

		<u-popup :show="modification" mode="center" round="12" closeable :safeAreaInsetBottom="false" @close="close">
			<view class="" style="padding: 40upx 70upx;">
				<view class="form_item">
					<text class="dot"></text>
					<text class="label_title">修改队伍头像</text>
					<view class="image" @click="setModificationImg">
						<block v-if="!setModificationData.pic">
							<u-icon name="camera-fill" size="50" color="#666666" top="15rpx"></u-icon>
							<view class="">
								上传图片
							</view>
						</block>
						<image v-else :src="setModificationData.pic" mode="aspectFill"></image>
					</view>

				</view>
				<view class="form_item" style="margin-top: 50upx;">
					<text class="dot"></text>
					<text class="label_title">修改队名</text>
					<view class="input">
						<input type="text" placeholder="最多输入6个字" v-model="setModificationData.title"
							@blur="setModificationText">
					</view>
					<!-- <text>队</text> -->
				</view>

				<!-- 				<view class="form_item_btn">
					确定
				</view> -->
			</view>
		</u-popup>

		<view class="btn">
			<button open-type="share" class="share">邀请队友</button>
			<!-- 		<view class="" @click="share">
				
			</view> -->
			<view class="" v-if="gameData.user_id==userPeople.user_id" @click="setExperienceShow">
				开始挑战
			</view>
			<view class="" @click="anewShow=true" v-if="gameData.user_id==userPeople.user_id">
				重新组队
			</view>
		</view>


		<u-popup :show="guideShow" mode="center" round="20rpx" closeable @close="guideClose"
			:safeAreaInsetBottom="false">
			<view class="time" @click="guideClose">
				{{number?number+'s 后可关闭':'点击关闭'}}
			</view>
			<image @click="guideClose" style="width: 70vw;"
				src="https://wjlm.goldsu.cn/file/20221230140903.png" mode="widthFix"></image>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: null,
				gameId: '',
				modification: false,
				guideShow: false,
				gameData: {},
				teamList: [],
				sex: 1,
				sexShow: false,
				anewShow: false,
				experienceShow: false,
				userData: {},
				candidate: {},
				teamId: '',
				userPeople: {},
				peopleNum: 0,
				cap_zt: 1,
				setModificationData: {
					pic: '',
					title: '',
					team_id: ''
				},
				acceptStatus: true,
				team_type: 1,
				number: 2,
				gameDataUserId:0
			}
		},
		watch: {
			cap_zt() {
				if (this.cap_zt == 2) this.guideShow = true
			},
			guideShow() {
				if (this.guideShow) {
					let ter = setInterval(() => {
						if (this.number == 0) {
							clearInterval(ter)
						} else {
							this.number--
						}
					}, 1000)
				}
			},
		},
		onLoad(e) {
			uni.setStorageSync('gameId', e.gameId);
			this.team_type = e.team_type
			this.gameId = e.gameId
		},
		onUnload() {
			this.acceptStatus = false
			// uni.$off('onMessage') 
			
		},
		onShow() {
			this.acceptStatus = true
			if (!this.userPeople.user_id) {
				// if (this.team_type == 2) {
				this.sexShow = true
				// } else {
				// this.joinGame()
				// }
			}
			let page = getCurrentPages();
			let currentRoute = page[page.length - 1].route
			this.userData = uni.getStorageSync("userData")


			this.$ws.init()
			uni.$on('onMessage', (res) => {
				if (!this.acceptStatus) return;
				if (res.code == 403) {
					uni.showToast({
						title: '该房间已解散！！！',
						icon: 'none'
					});
					setTimeout(() => {
						if (this.userData.id == this.gameData.user_id) {
							uni.redirectTo({
								url: './createActivity'
							})
						} else {
							uni.switchTab({
								url: '/pages/me/me'
							})
						}

					}, 1500)
				} else {
					this.sexShow = false
					this.gameData = res.data.game
					
					
					if((this.userData.id == this.gameData.user_id)&&(this.gameDataUserId!=this.gameData.user_id)){
					
						uni.showToast({
							title: '您是该房间的房主！',
							icon: 'none'
						});
					} 
						this.gameDataUserId=this.gameData.user_id

					this.teamList = res.data.team || []
					this.peopleNum = 0
					this.teamList.forEach(el => {
						el.people.forEach(els => {
							this.peopleNum++
							if (this.userData.id == els.user_id) {
								this.userPeople = els

								this.userPeople.teamId = el.id
							}
						})
					})
					if (!res.data.code) return;
					if (res.data.userPeople) {

						this.userPeople = res.data.userPeople
						
						this.cap_zt = this.userPeople.cap_zt
					}

				}

			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});



		},

		onShareAppMessage() {
			return {
				title: '邀请您加入活动 ' + this.gameData.title,
				path: '/pages/createActivity/formTeam?gameId=' + this.gameId + '&team_type=' + this.gameData.team_type
			}
		},
		methods: {
			guideClose() {
				if (this.number) return;
				this.guideShow = false
			},
			setCandidateCaptain(items, item) {
				this.candidate = {}
				if (this.userPeople.user_id !== this.gameData.user_id) { //我是否为创始人  否
					if (this.userPeople.cap_zt !== 2) return; //我是队长
					if (items.user_id == this.userPeople.user_id) return; //操作本人

					if (this.userPeople.teamId !== item.id && this.userPeople.user_id !== this.gameData.user_id)
				return; //置换队员是为同队
				} else {
					if (items.user_id == this.userPeople.user_id && items.cap_zt == 2) return;
				}

				// if (items.cap_zt == 2) return; //置换成员是否已经为队长
				this.candidate = items
				this.candidate.teamId = item.id
			},
			setCaptain() {
				let that = this
				uni.showModal({
					title: '提示',
					content: `您确定要将队长交于 ${this.candidate.user_name} 吗`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$myRuquestWs('home/game/team_manag', {
								game_id: that.gameData.id,
								team_id: that.candidate.teamId,
								user_id_s: that.candidate.user_id
							}).then(res => {
								that.candidate = {}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			setMaster() {
				let that = this
				uni.showModal({
					title: '提示',
					content: `您确定要将房主交于 ${this.candidate.user_name} 吗`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', that.gameData.id, that.candidate.teamId);
							that.$myRuquestWs('home/game/founder_save', {
								game_id: that.gameData.id,
								user_id: that.candidate.user_id,
							}).then(res => {
								that.candidate = {}
								

								uni.showToast({
									title: '您已退出本房间！',
									icon: 'none'
								});
								if(that.$ws) that.$ws.completeClose()
								uni.removeStorageSync('gameId');
								that.$audioStop()
								
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/index/index'
									})
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			setModificationImg() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: function(res) {
						console.log(res)
						that.$uploadFiles({
							filePath: res.tempFilePaths[0]
						}).then(ress => {
							that.setModification('pic', ress.data)
						})
					}
				});
			},
			setModificationText() {


				let str = this.setModificationData.title
				let code=false
				for (let i = 0; i < str.length; i++) {
					let item=str[i]
					if(!(uni.$u.test.chinese(item)||uni.$u.test.enOrNum(item))) {
						code=true
						i=str.length
					} 
				}
				
				if(code) return uni.showToast({
					title: '队伍名称禁止特殊字符！',
					icon:'none'
				})
				
				str = str.replace(/[\r\n]/g, "");
				str = str.replace(/\ +/g, "");

				this.setModification('title', str.substring(0, 6))
			},
			setModification(type, value) {
				let data = {
					game_id: this.gameData.id,
					team_id: this.setModificationData.team_id
				}
				data[type] = value
				this.$myRuquestWs('home/game/team_det', data).then(res => {
					if (type == 'pic') value = 'https://wjlm.goldsu.cn' + value
					this.setModificationData[type] = value
				})
			},
			joinTeam(item) {
				if (this.userPeople.teamId == item.id || this.team_type == 2) return;
				if (this.userPeople) {
					//换队
					this.$myRuquestWs('home/game/game_people_save', {
						game_id: this.gameData.id,
						team_id: item.id,
						user_id: this.userData.id
					})
				} else {
					// 加入
					this.teamId = item.id
					this.sexShow = true
				}

			},
			// setModificationImage(item){
			// 	if (this.userPeople.user_id !== this.gameData.user_id) { //我是否为创始人  否
			// 		if (this.userPeople.cap_zt !== 2||this.userPeople.teamId!==item.id) return; //我是队长
			// 	}
			// 	this.setModificationData.team_id = item.id
			// 	this.setModificationImg()
			// },
			setModificationShow(item) {
				// if (this.userPeople.user_id !== this.gameData.user_id) { //我是否为创始人  否
				if (this.userPeople.cap_zt !== 2 || this.userPeople.teamId !== item.id) return uni.showToast({
					title: '仅队长可修改！',
					icon: 'none'
				});; //我是队长
				// }
				this.setModificationData.pic = item.pic
				this.setModificationData.team_id = item.id
				this.setModificationData.title = item.title
				this.modification = true
			},

			joinGame() {
				this.$myRuquestWs('home/game/game_people_add', {
					game_id: this.gameId,
					team_id: this.teamId || '',
					sex: this.sex
				}).then(res => {
					this.$myRuquest('home/index/config').then(ress => {
						uni.setStorageSync('video_s', ress.data.video_s);
						uni.setStorageSync('video', ress.data.video);

					})
					uni.setStorageSync('gameDataVideoId', '');
					uni.setStorageSync('audioPk', '');
					this.sexShow = false
				})
			},
			dissolve() {
				this.$myRuquestWs('home/game/game_regroup', {
					game_id: this.gameData.id
				}).then(res => {
					uni.removeStorageSync('gameId');
					this.anewShow = false

				})
			},
			setExperienceShow() {
				if (this.teamList.some(item => item.people.length < 1)) {
					uni.showToast({
						title: '当前有队伍空缺，无法开始',
						icon: 'none'
					});
					// this.experienceShow = true
				} else {
					this.begin()
				}
			},
			begin() {
				this.$myRuquestWs('home/game/game_go', {
					game_id: this.gameData.id
				})
			},
			close() {
				this.modification = false
			}
		}
	}
</script>

<style lang="scss">
	.time {
		position: absolute;
		top: calc(20vmin / 7.5);
		left: calc(20vmin / 7.5);
		padding: calc(4vmin / 7.5) calc(10vmin / 7.5);

		height: calc(40vmin / 7.5);
		background-color: rgba(0, 0, 0, .23);
		border-radius: calc(40vmin / 7.5);
		line-height: calc(40vmin / 7.5);
		text-align: center;
		color: #ffffff;

	}

	.content {
		background-color: #FAFAFA;
		min-height: 100vh;
		padding: 120upx 0;
		padding-top: 120upx;

		.title {
			display: flex;
			background-color: #ffffff;
			padding-top: 30upx;
			padding-bottom: 20upx;
			position: fixed;
			top: 0;
			z-index: 99;
			width: 100vw;
			background-color: #ffffff;
			justify-content: space-around;

			.text:nth-child(2) {
				flex: 1;
			}

			.line {
				width: 2upx;
				height: 64upx;
				background-color: #C2C2C2;
				// margin: 0 auto;
			}

			.text {
				// flex: 1;
				padding: 0 calc(10vmin / 7.5);
				text-align: center;
				height: 64upx;
				line-height: 64upx;
				font-size: 28upx;
				color: #333333;
				// border-left: 2upx solid #C2C2C2;
				white-space: nowrap;
			}


		}

		.team_item {
			padding: 20upx 40upx;
			padding-bottom: 40upx;
			background-color: #ffffff;
			margin-top: 10upx;

			.team_text {
				display: flex;

				.image {
					width: 120upx;
					height: 120upx;
					margin-right: 20upx;
					border: 4upx solid #F4D6AA;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: calc(100% + 20upx);
						height: calc(100% + 20upx);
						margin: -10upx;
					}
				}

				.text {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					font-size: 28upx;
					color: #333333;

					.joinBtn {
						text {
							background-color: #999999;
							color: #ffffff;
							font-size: 24upx;
							text-align: center;
							padding: 5upx 15upx;
							border-radius: 40upx;

						}
					}

					>view:nth-child(2) {
						font-weight: 700;
					}
				}
			}

			.team_member {
				display: flex;
				flex-wrap: wrap;
				margin: 20upx 0;

				.image {
					width: 116upx;
					margin-bottom: 20upx;
					position: relative;

					.setCaptain {
						position: absolute;
						bottom: 180upx;
						z-index: 99999;
						background-color: #333;
						padding: 5upx 20upx;
						border-radius: 8upx;
						overflow: visible;

						.text {
							height: 60upx;
							line-height: 60upx;
							color: #ffffff;
						}

						.indicate {
							width: 0;
							height: 0;
							position: absolute;
							bottom: -36upx;
							z-index: 999;
							border: 25upx solid transparent;
							border-top: 15upx solid #333;
						}
					}

					// height: 116upx;
					image {
						width: 94upx;
						height: 94upx;
						margin: 0 8upx;
						border-radius: 4upx;
						border: 6upx solid #91BCE6;
					}

					.type {
						color: #AC7D3D;
						font-size: 24upx;
						font-weight: 700;
						width: 70upx;
						height: 40upx;
						line-height: 40upx;
						text-align: center;
						border-radius: 40upx;
						background-color: #FED194;
						margin: 0 auto;
						margin-top: -40upx;
						position: relative;
						top: 10upx;
						z-index: 9;
					}
					.master_type{
						color: #AC7D3D;
						font-size: 22upx;
						width: 60upx;
						height: 35upx;
						line-height: 35upx;
						text-align: center;

						background-color: #FED194;
						position: absolute;
						top: 0upx;
						left: 8upx;
						z-index: 9;
					}

					view {
						font-size: 28upx;
						color: #666666;
						text-align: center;
						// margin-top: 15upx;
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //用省略号显示
						white-space: nowrap;
					}
				}
			}
		}

		.form_item {
			display: flex;
			align-items: center;
			text-align: center;

			.dot {
				width: 10upx;
				height: 10upx;
				border-radius: 10upx;
				background-color: #AC7D3D;
			}

			.label_title {
				color: #333333;
				font-size: 24upx;
				font-weight: 700;
				margin: 0 16upx;
			}

			.image {
				width: 160upx;
				height: 160upx;
				border: 2upx solid #666666;
				border-radius: 8upx;
				text-align: center;

				font-size: 24upx;
				color: #666666;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.input {
				border: 2upx solid #666666;
				padding: 14upx 18upx;
				margin-right: 16upx;
				border-radius: 8upx;
				text-align: left;
				font-size: 28upx;
				color: #999999;
			}

		}

		.form_item_btn {
			background-color: #FED194;
			width: 240upx;
			height: 70upx;
			font-size: 28upx;
			color: #AC7D3D;
			line-height: 70upx;
			text-align: center;
			border-radius: 70upx;
			margin: 0 auto;
			margin-top: 56upx;
		}

		.btn {
			display: flex;
			justify-content: space-around;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			background-color: #ffffff;
			padding: 40upx 0;
			z-index: 999;

			.share,
			view {
				background-color: #FED194;
				color: #AC7D3D;
				width: 220upx;
				height: 70upx;
				line-height: 70upx;
				text-align: center;
				border-radius: 45upx;
				margin: 0;
				border: none;
			}

			view:nth-child(2) {
				background-color: #000000;
			}
		}

		.sex {
			padding: 0 132upx;

			.text {
				font-size: 36upx;
				color: #333333;
				font-weight: 700;
				text-align: center;
				padding: 40upx 0;
			}

			.sex_list {
				display: flex;
				justify-content: space-between;

				view {
					width: 140upx;
					height: 140upx;
					background-color: #E8E8E8;
					border-radius: 8upx;
				}

				.active {
					border: 2upx solid #91BCE6;
				}
			}

			.join_game {
				width: 234upx;
				height: 64upx;
				line-height: 64upx;
				text-align: center;
				border-radius: 64upx;
				margin: 0 auto;
				margin-top: 56upx;
				margin-bottom: 20upx;
				font-size: 28upx;
				color: #AC7D3D;
				background-color: #FED194;
			}
		}
	}

	.anew_btn {
		width: 234upx;
		height: 68upx;
		line-height: 68upx;
		border-radius: 34upx;
		text-align: center;
		background-color: #FED194;
		color: #AC7D3D;
		font-size: 28upx;
	}
</style>
